"use client";
import { useState } from "react";
import SkinLogo from "@/components/Layout/Header/skinLogo";
import MorphSVGExample from "@/components/Layout/Header/morphSVGExample";

export default function AnimationDemo() {
  const [showMorphExample, setShowMorphExample] = useState(false);

  return (
    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 py-12">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-4xl font-bold text-center mb-8 text-gray-800 dark:text-white">
            GSAP SVG 动画演示
          </h1>
          
          <div className="grid md:grid-cols-2 gap-8">
            {/* 基础动画演示 */}
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
              <h2 className="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">
                基础 GSAP 动画
              </h2>
              <p className="text-gray-600 dark:text-gray-300 mb-6">
                点击下面的图标查看太阳和月亮之间的平滑变换动画。
                这个示例使用了 GSAP 的基础功能，包括透明度、缩放和旋转效果。
              </p>
              
              <div className="flex justify-center mb-4">
                <SkinLogo />
              </div>
              
              <div className="text-sm text-gray-500 dark:text-gray-400">
                <p>✨ 平滑的透明度过渡</p>
                <p>🔄 整体旋转效果</p>
                <p>📏 缩放动画</p>
                <p>⚡ 光线旋转效果</p>
              </div>
            </div>

            {/* MorphSVG 演示 */}
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
              <h2 className="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">
                MorphSVG 高级变换
              </h2>
              <p className="text-gray-600 dark:text-gray-300 mb-6">
                这个示例展示了如何使用 GSAP 的 MorphSVG 插件进行复杂的 SVG 路径变换。
                需要购买 MorphSVG 插件许可证才能使用完整功能。
              </p>
              
              <div className="flex justify-center mb-4">
                <button
                  onClick={() => setShowMorphExample(!showMorphExample)}
                  className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                >
                  {showMorphExample ? "隐藏" : "显示"} MorphSVG 演示
                </button>
              </div>
              
              {showMorphExample && (
                <div className="flex justify-center">
                  <MorphSVGExample />
                </div>
              )}
              
              <div className="text-sm text-gray-500 dark:text-gray-400 mt-4">
                <p>🎯 精确的路径变换</p>
                <p>🔄 多形状循环变换</p>
                <p>⚡ 高性能动画</p>
                <p>💎 专业级效果</p>
              </div>
            </div>
          </div>

          {/* 技术说明 */}
          <div className="mt-12 bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6">
            <h3 className="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">
              技术实现说明
            </h3>
            <div className="grid md:grid-cols-2 gap-6 text-sm text-blue-700 dark:text-blue-300">
              <div>
                <h4 className="font-semibold mb-2">基础 GSAP 动画：</h4>
                <ul className="space-y-1">
                  <li>• 使用 useRef 获取 SVG 元素引用</li>
                  <li>• 创建 GSAP 时间线控制动画序列</li>
                  <li>• 结合透明度、缩放、旋转效果</li>
                  <li>• 响应主题切换事件</li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-2">MorphSVG 插件：</h4>
                <ul className="space-y-1">
                  <li>• 需要购买 GSAP 商业许可证</li>
                  <li>• 支持复杂 SVG 路径变换</li>
                  <li>• 自动处理路径插值</li>
                  <li>• 提供降级方案</li>
                </ul>
              </div>
            </div>
          </div>

          {/* 代码示例 */}
          <div className="mt-8 bg-gray-800 rounded-lg p-6">
            <h3 className="text-xl font-semibold mb-4 text-white">
              核心代码示例
            </h3>
            <pre className="text-green-400 text-sm overflow-x-auto">
{`// 基础 GSAP 动画
const tl = gsap.timeline();
tl.to(sunPathRef.current, {
  opacity: 1,
  scale: 1,
  duration: 0.4,
  ease: "back.out(1.7)"
});

// MorphSVG 变换（需要许可证）
gsap.to(pathRef.current, {
  morphSVG: newPath,
  duration: 1,
  ease: "power2.inOut"
});`}
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
}
